<template>
	<view class="page2">
		<view class="top">
			<view class="search">
				<input type="text" placeholder="请输入商品名称/商品编号" />
				<icon type="search" size="19" />
			</view>
			<view class="order-tab">
				<view class="tab" v-for="(item,index) in orderTab" :key="index" :class="{'action':OrderType==index}"
					@click="onOrderTab(index)">
					<text>{{item}}</text>
					<text class="line"></text>
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list" v-for="(item,index) in 6" @click="onOrderList" :key="index">
				<view class="title-status">
					<view class="title">
						<text>下单时间：2020-12-12 18:56</text>
					</view>
					<view class="status">
						<text>{{OrderType != 0 ? orderTab[OrderType] : '待付款'}}</text>
						<view class="image">
							<uv-icon name="trash"></uv-icon>
						</view>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods">
						<view class="thumb">
							<image
								src="http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727051733172207185306822.jpg"
								mode=""></image>
						</view>
						<view class="item">
							<view class="goods-name">
								<text class="two-omit">丰富的营养，美味的口感，阳光玫瑰，让你健康又美丽</text>
							</view>
							<view class="goods-price">
								<text class="min">￥</text>
								<text class="max">30</text>
								<text class="min">.00</text>
							</view>
						</view>
					</view>
				</view>
				<view class="status-btn">
					<view class="btn">
						<text>取消订单</text>
					</view>
					<view class="btn action" @click.stop="onEvaluate">
						<text>评价</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const OrderType = ref(0)
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad(async (params) => {
		OrderType.value = params.type || 0;
	})
	const orderTab = reactive(['全部', '待付款', '待发货', '待收货', '待评价'])
	// 列表tab点击
	const onOrderTab = (type) => {
		OrderType.value = type;
	}
	//订单列表点击
	const onOrderList = () => {
		uni.navigateTo({
			url: '/pages/orderDetails/orderDetails',
		})
	}
	//评价点击
	const onEvaluate = () => {
		// uni.navigateTo({
		// 	url: '/pages/MyEvaluatePush/MyEvaluatePush'
		// })
	}
</script>

<style scoped lang="scss">
	@import 'orderList.scss';
</style>